<template>
  <div style="width: 800px">
    <ep-render-form :widgetList="widgetList"></ep-render-form>

    <m-input></m-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const widgetList = ref([
  {
    id: 'card1234',
    type: 'card',
    name: '自定义组件',
    icon: 'card-field',
    options: {
      name: 'card1234',
      publicVars: {},
      components: []
    }
  },
  {
    id: 'input1234',
    type: 'input',
    name: '文本输入',
    icon: 'input-field',
    options: {
      name: 'input1234',
      label: '文本输入',
      defaultValueType: 0, // 0自定义 1公式编辑
      defaultValue: '',
      defaultValueFunc: '', // 公式表达式
      type: 'text',
      maxlength: '20',
      showWordLimit: false,
      placeholder: '可以填写任意文本',
      append: '',
      disabled: false,
      readonly: false,
      clearable: false,
      workflow: true, // 加入审批流程条件使用
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'textarea1234',
    type: 'textarea',
    name: '多行输入',
    icon: 'textarea-field',
    options: {
      name: 'textarea1234',
      label: '多行输入',
      defaultValue: '',
      maxlength: '3000',
      rows: 3,
      autosize: true,
      showWordLimit: true,
      ellipsis: 3, // 详情展示的行数
      expandTips: '展开',
      retractTips: '收起',
      placeholder: '可以填写任意文本',
      disabled: false,
      readonly: false,
      workflow: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'number1234',
    type: 'number',
    name: '数字输入',
    icon: 'number-field',
    options: {
      name: 'number1234',
      label: '数字输入',
      defaultValue: '',
      min: 0,
      max: 9999,
      placeholder: '只能填写数字',
      append: '',
      disabled: false,
      readonly: false,
      workflow: true,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'radio1234',
    type: 'radio',
    name: '单项选择',
    icon: 'radio-field',
    options: {
      name: 'radio1234',
      label: '单项选择',
      defaultValue: '1',
      optionItems: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' }
      ],
      align: 0, // 0水平排列 1垂直排列
      disabled: false,
      workflow: true,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'checkbox1234',
    type: 'checkbox',
    name: '多项选择',
    icon: 'checkbox-field',
    options: {
      name: 'checkbox1234',
      label: '多项选择',
      defaultValue: [],
      optionItems: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' }
      ],
      align: 0, // 0水平排列 1垂直排列
      disabled: false,
      workflow: true,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'select1234',
    type: 'select',
    name: '选择列表',
    icon: 'select-field',
    options: {
      name: 'select1234',
      label: '选择列表',
      defaultValue: '1',
      optionItems: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' }
      ],
      placeholder: '请选择',
      disabled: false,
      clearable: false,
      workflow: true,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'cascader1234',
    type: 'cascader',
    name: '级联选择',
    icon: 'cascader-field',
    options: {
      name: 'cascader1234',
      label: '级联选择',
      defaultValue: [],
      optionItems: [
        { label: '部门一', value: '1', children: [{ label: '子部门', value: '11' }] },
        { label: '部门二', value: '2' },
        { label: '部门三', value: '3 ' }
      ],
      expandTrigger: 'hover', // 展开方式 click / hover
      placeholder: '',
      disabled: false,
      readonly: false,
      clearable: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'time1234',
    type: 'time',
    name: '时间选择',
    icon: 'time-field',
    options: {
      name: 'time1234',
      label: '时间选择',
      defaultValue: '',
      format: 'HH:mm:ss',
      placeholder: '请选择',
      disabled: false,
      readonly: false,
      clearable: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'date1234',
    type: 'date',
    name: '日期选择',
    icon: 'date-field',
    options: {
      name: 'date1234',
      label: '日期选择',
      defaultValue: '',
      type: 'date',
      format: 'YYYY-MM-DD',
      placeholder: '请选择',
      disabled: false,
      readonly: false,
      clearable: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'fileupload1234',
    type: 'fileupload',
    name: '附件上传',
    icon: 'fileupload',
    options: {
      name: 'fileupload1234',
      label: '附件上传',
      inputAlign: 'left', // 输入框位置
      defaultValue: [],
      btn: '添加',
      camera: false, // 手机端仅拍照上传
      action: '/api/basic/image-manage/upload', // 上传接口
      actionBlob: '/api/basic/image-manage', // 服务器地址
      reduce: 1, // 使用压缩图片上传 0原图 1无损高清 2高质量
      limit: 10, // 最大数量
      fileMaxSize: 10, // 文件大小MB
      listType: 'picture-card', // 文件列表类型
      fileTypes: ['jpg', 'xls'], // ['jpg', 'doc', 'xls', 'zip']
      tip: '最多上传10个附件', // 提示
      disabled: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'signature1234',
    type: 'signature',
    name: '签名',
    icon: 'signature-field',
    options: {
      name: 'signature1234',
      label: '签名',
      type: 'png',
      penColor: '#000',
      lineWidth: 3,
      backgroundColor: '',
      clearButtonText: '清空',
      confirmButtonText: '确认',
      signText: '点击去签名',
      reSignText: '重新签名',
      disabled: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'amount1234',
    type: 'amount',
    name: '金额',
    icon: 'amount',
    options: {
      name: 'amount1234',
      label: '金额',
      type: 'number',
      min: 0,
      max: 999999999999999,
      decimalPlaces: 2, // 精度
      omitEndZero: true, // 省略末尾0
      placeholder: '请输入金额',
      readonly: false,
      workflow: true,
      required: true,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'upperamount1234',
    type: 'upperamount',
    name: '大写金额',
    icon: 'upperamount',
    options: {
      name: 'upperamount1234',
      label: '大写金额',
      defaultValue: '',
      maxlength: '20',
      selectSumName: '', // 关联金额
      placeholder: '请输入大写金额',
      readonly: false,
      required: false,
      requiredMessage: '不能为空！'
    }
  },
  {
    id: 'correlation1234',
    type: 'correlation',
    name: '关联审批',
    icon: 'correlation',
    options: {
      name: 'correlation1234',
      label: '关联审批',
      defaultValue: [],
      selectType: false, // 可选范围 默认全部
      selectRange: [], // 选择审批
      limit: 10, // 最大数量
      tip: '最多关联10个审批', // 提示
      required: false,
      requiredMessage: '不能为空！'
    }
  }
])
</script>

<style scoped></style>
